<template>
  <div class="app-container">
    <div class="left">
      <card title="人脸库">
        <template v-slot:content>
          <div class="content">
            <div class="searh-form">
              <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
              >
                <el-form-item label="用户名" prop="createBy">
                  <el-input
                    v-model="queryParams.nickName"
                    placeholder="请输入用户名"
                    clearable
                    size="small"
                    style="width:200px"
                  />
                </el-form-item>
                <el-form-item label="部门名称" prop="projectName">
                  <treeselect
                    v-model="queryParams.deptId"
                    :options="deptOptions"
                    :show-count="true"
                    placeholder="请选择归属部门"
                    style="width:200px"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getAllHasAuth"
                  >搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- <el-button size="mini" type="primary" icon="el-icon-upload" class="mb-22">批量导入人脸</el-button> -->
            </div>
            <div class="user-card-list">
              <div
                class="card-wrapper"
                v-for="(item,index) in authList"
                :key="index"
                @mouseenter="handleMouseEnter(item,index)"
                @mouseleave="handleMouseLeave(item,index)"
              >
                <el-card :body-style="{ padding: '0px' }" class="user-card">
                  <el-image
                    class="user-image"
                    :src="item.attachment"
                    :preview-src-list="[item.attachment]"
                  />
                  <!--                <img src="@/assets/images/man.png" class="image" />-->
                  <div class="user-info">
                    <div class="user-name">{{item.nick_name}}</div>
                    <div class="user-dept" v-if="item.show">{{item.dept_name}}</div>
                    <div class="user-del" v-else @click="delFcce(item)">删除</div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </template>
      </card>
    </div>
    <div class="right">
      <card title="未录入人脸">
        <template v-slot:content>
          <div class="content">
            <el-input v-model="noAuthNickName" placeholder="请输入用户名" clearable size="small">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="user-card-list2">
              <el-card
                :body-style="{ padding: '0px' }"
                class="user-card2"
                v-for="(item,index) in noAuthList"
                :key="index"
              >
                <img src="@/assets/images/man.png" class="image" />
                <div class="user-info">
                  <div class="user-name">{{item.nick_name}}</div>
                  <div class="user-dept">{{item.dept_name}}</div>
                  <div class="btn" @click="uploadImage(item)">上传照片</div>
                </div>
              </el-card>
            </div>
          </div>
        </template>
      </card>
    </div>
    <el-dialog title="上传照片" :visible.sync="open" width="460px" append-to-body>
      <el-form ref="form" >
        <el-form-item label="用户" prop="userId">
          <el-input v-model="form.userName" disabled maxlength="30" />
        </el-form-item>
        <el-form-item label="上传照片" prop="attachment">
          <el-upload
            :action="url"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :auto-upload="false"
            :file-list="imageList"
            :headers="headers"
            :limit="1"
            :data="form"
            name="image"
            ref="upload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import card from "@/views/homePage/components/card";
import {
  getAllHasAuth,
  getAllNotAuth,
  removebyuserid,
  addface
} from "@/api/oa/message";

export default {
  components: {
    card,
    Treeselect
  },
  data() {
    return {
      open: false,
      imageList: [],
      // 部门树选项
      deptOptions: undefined,
      url:
        process.env.VUE_APP_BASE_API +
        "/workflow/FaceRecognition/faceset/addface",
      form: {
        outerId: process.env.VUE_APP_OUTERID,
        userId: null,
        userName: null
      },
      rules: {},
      queryParams: {},
      noAuthNickName: "",
      showTable: true,
      isDisabled: false,
      authList: [],
      noAuthList: [],
      headers: {
        Authorization: "Bearer " + getToken()
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    noAuthNickName(val) {
      this.getAllNotAuth();
    }
  },
  mounted() {
    console.log("22222",process.env)
    this.reLoad();
    this.getDeptTree();
  },
  methods: {
    reLoad() {
      this.getAllHasAuth();
      this.getAllNotAuth();
    },
    resetQuery() {
      this.queryParams = {};
      this.getAllHasAuth();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    uploadImage(item) {
      this.selectUser = item;
      this.form.userId = item.user_id;
      this.form.userName = item.nick_name;
      this.open = true;
    },
    handleSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$refs.upload.clearFiles();
        this.open = false;
        this.reLoad();
        this.$modal.msgSuccess("添加成功！");
      }
    },
    submitForm() {
      this.$refs.upload.submit();
    },
    cancel() {
      this.open = false;
    },
    getAllHasAuth() {
      getAllHasAuth(this.queryParams).then(response => {
        this.authList = response.data;
        this.authList.forEach(auth => {
          auth.show = true;
        });
      });
    },
    getAllNotAuth() {
      getAllNotAuth({
        nickName: this.noAuthNickName
      }).then(response => {
        this.noAuthList = response.data;
      });
    },
    handleMouseEnter(item, index) {
      this.authList.forEach(auth => {
        auth.show = true;
      });
      item.show = false;
      this.$set(this.authList, index, item);
      console.log("移入", this.authList[index], this.authList[index].show);
    },
    handleMouseLeave(item, index) {
      this.authList.forEach(auth => {
        auth.show = true;
      });
      item.show = true;
      this.$set(this.authList, index, item);
      console.log("移除", item.show);
    },
    addFace() {},
    handlePictureCardPreview(file) {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    delFcce(item) {
      let data = {
        userId: item.user_id,
        outerId: process.env.VUE_APP_OUTERID
      };
      this.$modal
        .confirm('是否确认删除"' + item.nick_name + '"的照片？')
        .then(function() {
          return removebyuserid(data);
        })
        .then(() => {
          this.reLoad();
          this.$modal.msgSuccess("删除成功！");
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  display: flex;
  .right {
    width: 4.3rem;
    background: #ffffff;
  }
  .left {
    width: calc(100% - 4.3rem - 0.125rem);
    background: #ffffff;
    margin-right: 0.125rem;
  }
}
.content {
  height: 100%;
}
.searh-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-card-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100% - 0.675rem);
  overflow-y: auto;
}
.user-card {
  width: 2rem;
  //height: 3rem;
  //cursor: pointer;
  margin-right: 0.125rem;
  margin-bottom: 0.125rem;
  .user-image {
    height: 2.2rem;
    width: 2rem;
  }
}
.user-card-list2 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100% - 0.525rem);
  overflow-y: auto;
  margin-top: 0.125rem;
}
.user-card2 {
  width: 1.75rem;
  height: 3.05rem;
  cursor: pointer;
  margin-right: 0.125rem;
  margin-bottom: 0.125rem;
  &:nth-of-type(2n) {
    margin-right: 0;
  }
}
.user-info {
  cursor: pointer;
  padding: 0.05rem;
  font-size: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .user-name {
  }
  .btn {
    margin-top: 0.05rem;
    display: flex;
    justify-content: center;
    width: 1.25rem;
    color: #409eff;
    font-size: 0.2rem;
    border: 1px solid #409eff;
    border-radius: 0.1rem;
    padding: 0.05rem 0.125rem;
    &:hover {
      background: #40a0ff25;
    }
  }
  .user-del {
    color: red;
  }
}
.image {
  width: 1.75rem;
  height: 1.752rem;
}
.mb-22 {
  margin-bottom: 0.275rem !important;
}
::v-deep .el-image__inner {
    object-fit: cover !important;
}
</style>
